<template>
  <div class="nav-box">
    <div class="top-bar">
      <div class="left-title">
        <span class="site-title"> 马上有钱金融 </span>
      </div>
      <div v-if="!hasToken" class="right-menu">
        <router-link :to="{ path: '/register' }"><span>注册</span></router-link>
        <router-link :to="{ path: '/login' }"><span>登录</span></router-link>
      </div>
      <div v-else class="right-menu">
        <span>{{name}}</span>
        <el-dropdown>
          <span class="el-dropdown-link">
            我的账户<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <router-link :to="{ path: '/dashboard' }"
              ><el-dropdown-item>我的账户</el-dropdown-item></router-link
            >
            <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="menu-bar">
      <el-menu
        text-color="#000"
        active-text-color="#ffd04b"
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="0">首页</el-menu-item>
        <el-menu-item index="1">我要借款</el-menu-item>
        <el-menu-item index="2">我要投资</el-menu-item>
        <el-menu-item v-if="hasToken" index="3">我的账户</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
export default {
  props: ["activeIndex"],
  data() {
    return {
      path_list: ["/", "/loanapply", "/invest", "/dashboard"],
    };
  },
  methods: {
    handleSelect(index, indexPath) {
      console.log(index, indexPath);
      let path = this.path_list[index];
      console.log("当前要跳转的路劲是", path);
      this.$router.push({ path: path });
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  },
  computed: {
    ...mapGetters([
      "name"
    ]),
    hasToken() {
      return getToken();
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-box {
  background-color: #cc0000;
  color: white;
  .top-bar {
    display: flex;
    justify-content: space-between;
    padding: 0px 15px;
    height: 40px;
    align-items: center;
    .right-menu {
      span {
        margin: 0px 8px;
      }

      .el-dropdown-link {
        cursor: pointer;
        color: white;
      }
    }
    .left-title {
      .site-title {
        font-size: 22px;
      }
    }
  }
  .menu-bar {
    border: 1px solid #e6e6e6;
  }
}
</style>